<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="../common/taglibs.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
	<head>
		<meta charset="utf-8">
		<title>发起订单</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<link rel="stylesheet" href="${path}/common/css/mui.min.css">

		<script type="text/javascript" src="${path}/common/js/jquery-1.8.2.min.js"></script>
		<script type="text/javascript" src="${path}/common/js/paijian_script.js"></script>

		<style type="text/css">
			body {
				background-color: rgb(253,253,253);
				margin: 0;
				padding: 0;
				font-family: "微软雅黑";
				font-size: small;
			}
			
			.top_text {
				text-align: center;
				color: white;
				font-size: 20px;
				line-height: 50px;
				background-color: rgb(34, 196, 255);
			}
			
			.collapse_text {
				font-size: 15px;
				margin-left: 10px;
				color: red;
			}
			
			.mui-navigate-right {
				font-weight: 500;
				font-size: 20px;
			}
			
			.preson_info p {
				font-size: 20px;
				margin-top: 4px;
			}
			
			.mui-table-view-divider {
				font-size: 20px;
				color: black;
			}
			
			#submit_page {
				margin-top: 10px;
				width: 80%;
			}
			
			.tips {
				font-size: 16px;
				line-height: 45px;
			}
			
			.icon2 {
				width: 15%;
			}
			
			.icon1 {
				width: 15%;
			}
			
			.company_name_list {
				text-align: center;
			}
		</style>

	</head>

	<body>
		<div class="mui-content">
			<div class="top_text">速递</div>

			<img src="${path}/common/images/sucai.jpg" style="width: 100%;;" />

			<form method="post" action="${path }/saveOrder">
				<ul id="list" class="mui-table-view mui-table-view-chevron">
					<li class="mui-table-view-cell mui-collapse">
						<a id="collapse1" class="mui-navigate-right" href="#">
							<img src="${path}/common/images/icon1.png" style="width: 20%; vertical-align:middle ;" />
							<span class="tips" style="color: #000000;">快递提示</span>
						</a>
						<ul id="collapse_view" class="mui-table-view mui-table-view-chevron">
							<div class="mui-collapse-content">
								<p class="collapse_text">请你正确的填写自己手机号和地址，以便快递可以更快的送达!</p>
							</div>
						</ul>
					</li>

					<li class="mui-table-view-cell">
						<a class="mui-navigate-right" href="${path }/mypostion">
							<div>
								<div style="float: left; width: 20%; height: 100%;">
									<img src="${path}/common/images/icon2.png" style="float: left; width: 100%; vertical-align: middle;" id="icon2" />
								</div>
								<div class="preson_info" style="float:left; width: 80%; height: 100%;">
									<table border="0px" style="width: 100%;" id="table" height="485">
										<c:choose>
											<c:when test="${not empty user.addr.phone }">
												<tr><td><p id="person_name" style="font-size: 16px;">${user.addr.name }</p></td></tr>
												<tr><td><p id="person_phone" style="font-size: 16px;">${user.addr.phone }</p></td></tr>
												<tr><td><p id="person_addr" style="font-size: 16px;">${user.addr.addr }</p></td></tr>
											</c:when>
											<c:otherwise>
												<tr><td><p id="person_name" style="font-size: 16px;">你目前尚无地址</p></td></tr>
												<tr><td><p id="person_phone" style="font-size: 16px;">请添加地址！</p></td></tr>
												<tr><td><p id="person_addr" style="font-size: 16px;"></p></td></tr>
											</c:otherwise>
										</c:choose>
									</table>
								</div>
							</div>
						</a>
					</li>

					<li class="mui-table-view-cell">
						<a class="mui-navigate-right" onclick="company_click()">
							<div>
								<img src="${path}/common/images/icon3.png" style="width: 20%; vertical-align:middle ;" />
								
								<c:choose>
									<c:when test="${not empty user.order.number }">
										<span id="paijian_company" class="company_name_list" style="font-size: 16px;">${user.order.company }${user.order.number }</span>
									</c:when>
									<c:otherwise>
										<span id="paijian_company" class="company_name_list" style="font-size: 16px;">请选择快递</span>
									</c:otherwise>
								</c:choose>
							</div>
						</a>
					</li>

					<li class="mui-table-view-divider" style="font-size: 16px;">备注</li>
					<li class="mui-table-view-divider">
						<center>
							<textarea name="notes" rows="3" placeholder="有什么需要提醒帮你送快递的人？" style="font-size: 16px;"></textarea>
						</center>
					</li>
				</ul>

				<input id="hidden_person_name" type="hidden" name="name" value="${user.addr.name }" />
				<input id="hidden_phone" type="hidden" name="phone" value="${user.addr.phone }" />
				<input id="hidden_addr" type="hidden" name="addr" value="${user.addr.addr }" />
				<input id="hidden_company" type="hidden" name="company" value="${user.order.company }"/>
				<input id="hidden_company" type="hidden" name="number" value="${user.order.number }" />
				
				<div align="center" style="margin-bottom: 150px;">
					<button id="submit_page" type="submit" class="mui-btn mui-btn-primary">提交</button>
				</div>
				
				<nav class="mui-bar mui-bar-tab" style="background-color: rgb(253,253,253);">
			<div>
				<!-- <hr size="1px" /> -->
				<div style="width: 50%; float: left;">
					<center>
							<img src="${path }/common/images/bottom1.png" style="width:18% ;" />
							<br>
							<span style="color: rgb(0, 122, 255); font-family: '微软雅黑'; font-size: 13px; ">发起订单</span>
					</center>
				</div>

				<div style="width: 50%; float: right;">
					<center>
						<a href="${path }/dingdan">
						<img src="${path }/common/images/bottom2.png" style="width:18% ;" />
						<br>
						<span style="color: black; font-family: '微软雅黑'; font-size: 13px;">历史订单</span>
						</a>
					</center>
				</div>

			</div>
		</nav>
			</form>

			<script src="${path}/common/js/mui.min.js"></script>
			<script>
				
				$(document).ready(function(){
					
					mui.init({
						swipeBack: true //启用右滑关闭功能
					});
					
					$("#submit_page").click(function(){
						return true;
					});
					
					$("#my_infor").click(function(){
						//alert("!@3");
						location.href = "./myinfo";
					});
				});
			</script>
			<!-- 
			<nav class="mui-bar mui-bar-tab" style="position: fixed; bottom: 0px;">
				<a class="mui-tab-item mui-active" onclick="dingdan()">
					<span class="mui-icon mui-icon-home"></span>
					<span class="mui-tab-label">我的订单</span>
				</a>
				<a class="mui-tab-item" id="my_infor" >
					<span class="mui-icon mui mui-icon-contact"></span>
					<span class="mui-tab-label">我的信息</span>
				</a>
			</nav> -->
	</body>
</html>